import React, { Component } from 'react'
import { NavBar, Icon, Popover, Toast } from 'antd-mobile';
import axios from "axios";
import "./register.css"
const Item = Popover.Item;

export default class Register extends Component {
  state = {
    visible: false,
    selected: '',
    password: "",
    mobile: "",
    code: "",
    sendCode:''
  };
  

  //点击返回
  handleBackClick = (params) => {
    // this.props.history.go(-1)
    window.history.go(-1)
  }
  // 
  onSelect = (opt) => {
    // console.log(opt.props.value);
    this.setState({
      visible: false,
      selected: opt.props.value,
    });
  };

  handleVisibleChange = (visible) => {
    this.setState({
      visible,
    });
  };
  goToHome = (params) => {
    this.props.history.push("/")
  };
  goToBangDan = (params) => {
    this.props.history.push("/bangDan")
  }
  goToReDian = (params) => {
    this.props.history.push("/reDian")
  }
  //账号
  handleMobileChange=(e) => {
    console.log(e);

    this.setState({
      mobile:e.target.value
    },
      ()=>{
        console.log(this.state.mobile)
      }
    )
  }
  //密码
  handlePasswordChange=(e) => {
    this.setState({
      password: e.target.value,
    });
  }
  getCode = (params) => {
    axios
      .get("http://s.linweiqin.com/api/s/getMobileCode", {
        params: {
          mobile: this.state.mobile,
        },
      }).then((res) => {
        console.log(res);
        Toast.info(res.data.msg)
      });
  };

  handleSubmit=(params) => {
    axios.post("http://s.linweiqin.com/api/s/createUser",{
      username:this.state.mobile,
      password:this.state.password,
      mobile: this.state.mobile,
      code: this.state.sendCode,
    }).then((res)=>{
      console.log(res);
      // if(res.data.status==2){
      //   // Toast.offline("该号码已经注册过",1)
      //   Toast.offline(res.data.msg)
      // }else if(res.data.status==4){
      //   Toast.offline(res.data.msg)
      // }else if(res.data.status==100){
      //   Toast.offline(res.data.msg)
      // }
      // if(this.state.mobile===""){
      //   Toast.offline("输入不能为空")
      // }else if(this.state.sendCode===""){
      //   Toast.offline("验证码不能为空")
      // }else if(this.state.password===""){
      //   Toast.offline("密码不能为空")
      // }else if(res.data.status==100){
      //   Toast.offline("验证码不正确，或者密码为空")
      // }else if(res.data.status==100){
      //   Toast.offline("短信验证码十分钟内有效，请勿重新发送")
      // }else if(res.data.status==4){
      //   Toast.offline("该号码已经注册过",1)
     
      // }else if(res.data.status==2){
      //    Toast.offline("该号码已经注册过",1)
      // }
      Toast.info(res.data.msg)
      //    if(res.data.status==2){
      //   // Toast.offline("该号码已经注册过",1)
      //   Toast.offline(res.data.msg)
      // }else if(res.data.status==4){
      //   Toast.offline(res.data.msg)
      // }
    })
  
  }
  // 手机验证码
  sendChange=(e)=>{
    this.setState({sendCode:e.target.value})
  }

  
  render() {
    return (
      <div>
        <NavBar className="NavBar"
          icon={<Icon type="left" />}
          // onLeftClick={() => this.handleBackClick}
                 onLeftClick={() => window.history.go(-1)}
          rightContent={<Popover
            overlayClassName="fortest"
            overlayStyle={{ color: 'currentColor' }}
            visible={this.state.visible}
            overlay={[
              (<Item key="4" value="scan" data-seed="logId"><span onClick={this.goToHome}>首页</span></Item>),
              (<Item key="5" value="special" style={{ whiteSpace: 'nowrap' }}><span onClick={this.goToBangDan}>榜单</span></Item>),
              (<Item key="6" value="button ct" ><span onClick={this.goToReDian} style={{ marginRight: 5 }}>热点</span></Item>),
            ]}
            align={{
              overflow: { adjustY: 0, adjustX: 0 },
              offset: [-10, 0],
            }}
            onVisibleChange={this.handleVisibleChange}
            onSelect={this.onSelect}
          >
            <div style={{
              height: '100%',
              padding: '0 15px',
              marginRight: '-15px',
              display: 'flex',
              alignItems: 'center',
            }}
            >
              <Icon type="ellipsis" />
            </div>
          </Popover>}
        >注册</NavBar>
        <div className="register">
          <label htmlFor="mobile">

            <input type="text"
              id="mobile"
              value={this.state.mobile}
              onChange={this.handleMobileChange}
              placeholder="请输入手机号码"
            />
          </label>

          <div>
            <button onClick={this.getCode}>免费获取验证码</button>
            <input type="text" placeholder="请输入验证码" value={this.state.sendCode} onChange={this.sendChange}/>
          </div>

          <label htmlFor="password" >
            <input
              value={this.state.password}
              onChange={this.handlePasswordChange}
              type="password"
              name=""
              id="password"
              placeholder="密码"
            />

          </label>

          <p className="register-zhuce" onClick={this.handleSubmit}>注册</p>
        </div>
      </div>
    )
  }
}
